<template>
  <view class="page-container">
    <view v-if="!isLogin" class="no_login_wrap">
      <image src="../../../static/img/user/no_login.png" mode="aspectFill"></image>
      <h4>需要登录才可以使用该功能哦~</h4>
      <button @tap="jumpLogin">立即登录</button>
    </view>
    <view v-else class="logined_wrap">
      <view class="uni-list" v-for="item in commentList" :key="item.id">
        <view class="uni-list-cell">
          <view class="uni-list-cell-left">
            <image class="icon-avatar" :src="item.userAvatar"></image>
            <!-- <view class="icon-avatar"></view> -->
          </view>
          <view class="uni-list-cell-right">
            <view class="user-like">{{item.likeTimes>10000?'1w+':item.likeTimes}}
              <image src="../../../static/img/dianzan.png" mode="widthFix"></image>
            </view>
            <view class="user">
              <text class="user-name">{{item.userName}}</text>
              <text class="user-hospital">{{item.userHospital}}</text>
            </view>
            <view class="uni-comment-content">
              {{item.value}}
            </view>
            <view class="subject-wrap" @tap="jumpDetail(item.content)">
              <image class="subject-avatar" :src="item.content.thumb" mode="scaleToFill"></image>
              <view class="subject-content">
                <view class="subject-title">{{item.content.title1}}</view>
                <view class="subject-date">{{item.content.date}}</view>
              </view>
            </view>
            <!-- <view class="uni-comment-date">
            {{item.time}}
          </view> -->
          </view>
        </view>
      </view>
      <view v-if="commentList.length == 0" class="no-data">
        <image src="../../../static/img/user/no_comment.png" mode="widthFix"></image>
        <view class="uni-h5">
          您还没有宠幸任何文章~
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getMyComment
  } from '@/utils/api';
  export default {
    name: 'MyComment', // 我的评论
    data() {
      return {
        isLogin: false,
        page: 1,
        hasNextPage: true,
        commentList: [],
        userInfo: {} // 用户信息
      }
    },
    onShow() {
      let auth_token = uni.getStorageSync("auth_token");
      if (auth_token) {
        this.isLogin = true;
        this.commentList = [];
        this.userInfo = uni.getStorageSync('userInfo');
        this.queryMyComment(); // 获取数据
      } else {
        this.isLogin = false;
      }
    },
    onReachBottom() {
      if (this.hasNextPage) {
        this.queryMyComment(); // 获取数据
      }
    },
    methods: {
      // 跳转到登录页面
      jumpLogin() {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      },
      async queryMyComment() {
        const params = {
          page: this.page,
          limit: 10,
        }
        let res = await getMyComment(params);
        if (res.status === 0) {
          this.hasNextPage = res.data.hasNextPage;
          if (this.hasNextPage) {
            this.page++;
          }
          let list = res.data.docs || [];
          
          // 添加用户信息
          list.forEach(item => {
            item.userAvatar = this.userInfo.avatar;
            item.userName = this.userInfo.name;
            item.userHospital = this.userInfo.hospital;
          })
          this.commentList = this.commentList.concat(list);
        }
      },
      // 跳转详情页面
      jumpDetail(record) {
        if (record.type === 'Video') {
          // http://localhost:8080/#/pages/liveNotStart/liveNotStart?id=5d8db83bbcb25b2bb8983265&ad=
          uni.navigateTo({
            url: `/pages/liveNotStart/liveNotStart?id=${record.id}`
          })
        } else if (record.type === 'News') {
          uni.navigateTo({
            url: `/pages/zazhi/zazhi?id=${record.id}`
          })
        }
      }
    }
  }
</script>

<style>
  @import url("../../../static/style/no_login.css");

  page {
    /* height: 100%; */
    border-top: 2upx solid #E3E3E3;
  }

  .page-container {
    /* height: 100%; */
    padding: 0 30upx;
  }

  .uni-list-cell {
    padding-top: 40upx;
  }

  .uni-list-cell-left {
    width: 60upx;
    padding: 0;
    margin-right: 24upx;
    align-self: flex-start;
  }

  .icon-avatar {
    width: 60upx;
    height: 60upx;
    /* border: 1px solid #999; */
    border-radius: 50%;
  }

  .uni-list:before,
  .uni-list:after {
    display: none;
  }

  .user {
    font-weight: 400;
  }

  .user-name {
    font-size: 22upx;
    color: #333;
    display: flex;
    flex-direction: column;
  }

  .user-hospital {
    font-size: 20upx;
    color: #999;
  }

  .uni-list-cell-right {
    position: relative;
  }

  .user-like {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 24upx;
    color: #999;
    font-weight: 400;
  }
  .uni-comment-content {
    word-break: break-all;
  }

  .user-like image {
    width: 28upx;
    margin-left: 6upx;
  }

  .subject-wrap {
    margin-top: 20upx;
    padding: 10upx;
    background: #F4F4F4;
    display: flex;
  }

  .subject-avatar {
    width: 200upx;
    height: 120upx;
    background: #946EE1;
    flex-shrink: 0;
    margin-right: 10upx;
  }

  .subject-content {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }

  .subject-title {
    font-size: 24upx;
    color: #333;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .subject-date {
    font-size: 24upx;
    line-height: 24upx;
    color: #999;
  }

  /* 暂无数据 */
  .no-data {
    margin-top: 176upx;
    text-align: center;
  }

  .no-data image {
    width: 460upx;
  }

  .no-data .uni-h5 {
    color: #BBD5EF;
    margin-top: 36upx;
    font-size: 30upx;
    font-weight: 400;
  }
</style>
